/*——————通用模块——————*/
.block_center {
  margin: 0 auto;
}
body {
  background-color: #c4c4c4;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}
/*圆形，波纹放射效果*/
.circle {
  position: relative;
}
.circle div {
  position: absolute;
}
.circle-1 {
  /*画一个圆*/
  display: block;
  background-color: #ffffff;
  border-radius: 50%;
  width: 100px;
  height: 100px;
  margin: 175px 0 0 175px;
}
.circle-2 {
  /*画一个圆*/
  display: block;
  background-color: #ffffff;
  border-radius: 50%;
  width: 450px;
  height: 450px;
  /*创建动画*/
  /*
    animation 属性简写
    1.animation-name：规定需要绑定到选择器的 keyframe 名称
    2.animation-duration：规定完成动画所花费的时间，以秒或毫秒计
    3.animation-timing-function：规定动画的速度曲线
    4.animation-delay：规定在动画开始之前的延迟
    5.animation-iteration-count：规定动画应该播放的次数
    6.animation-direction：规定是否应该轮流反向播放动画
    */
  animation: circle_2 1.2s linear infinite;
  /* Firefox */
  -moz-animation: circle_2 1.2s linear infinite;
  /* Safari and Chrome */
  -webkit-animation: circle_2 1.2s linear infinite;
  /* Opera */
  -o-animation: circle_2 1.2s linear infinite;
  /*睡一会再执行*/
  animation-delay: 0.6s;
  /* Safari 和 Chrome */
  -webkit-animation-delay: 0.6s;
  /*放射效果*/
  /* Firefox */
  /* Safari and Chrome */
  /* Opera */
  /* IE9 */
}
@keyframes circle_2 {
  0% {
    transform: scale(0.222);
  }
  50% {
    transform: scale(0.622);
    filter: alpha(opacity=40);
    -moz-opacity: 0.4;
    opacity: 0.4;
  }
  98% {
    transform: scale(1);
    filter: alpha(opacity=20);
    -moz-opacity: 0.2;
    opacity: 0.2;
  }
}
@-moz-keyframes circle_2 {
  0% {
    -moz-transform: scale(0.222);
  }
  50% {
    -moz-transform: scale(0.622);
    transform: scale(0.622);
    filter: alpha(opacity=40);
    -moz-opacity: 0.4;
    opacity: 0.4;
  }
  98% {
    -moz-transform: scale(1);
    transform: scale(1);
    filter: alpha(opacity=20);
    -moz-opacity: 0.2;
    opacity: 0.2;
  }
}
@-webkit-keyframes circle_2 {
  0% {
    -webkit-transform: scale(0.222);
    transform: scale(0.222);
  }
  50% {
    -webkit-transform: scale(0.622);
    transform: scale(0.622);
    filter: alpha(opacity=40);
    -moz-opacity: 0.4;
    opacity: 0.4;
  }
  98% {
    -webkit-transform: scale(1);
    transform: scale(1);
    filter: alpha(opacity=20);
    -moz-opacity: 0.2;
    opacity: 0.2;
  }
}
@-o-keyframes circle_2 {
  0% {
    -o-transform: scale(0.222);
    transform: scale(0.222);
  }
  50% {
    -o-transform: scale(0.622);
    transform: scale(0.622);
    filter: alpha(opacity=40);
    -moz-opacity: 0.4;
    opacity: 0.4;
  }
  98% {
    -o-transform: scale(1);
    transform: scale(1);
    filter: alpha(opacity=20);
    -moz-opacity: 0.2;
    opacity: 0.2;
  }
}
@-o-keyframes circle_2 {
  0% {
    -ms-transform: scale(0.222);
    transform: scale(0.222);
  }
  50% {
    -ms-transform: scale(0.622);
    transform: scale(0.622);
    filter: alpha(opacity=40);
    -moz-opacity: 0.4;
    opacity: 0.4;
  }
  98% {
    -ms-transform: scale(1);
    transform: scale(1);
    filter: alpha(opacity=20);
    -moz-opacity: 0.2;
    opacity: 0.2;
  }
}
.circle-3 {
  /*画一个圆*/
  display: block;
  background-color: #ffffff;
  border-radius: 50%;
  width: 450px;
  height: 450px;
  /*创建动画*/
  /*
    animation 属性简写
    1.animation-name：规定需要绑定到选择器的 keyframe 名称
    2.animation-duration：规定完成动画所花费的时间，以秒或毫秒计
    3.animation-timing-function：规定动画的速度曲线
    4.animation-delay：规定在动画开始之前的延迟
    5.animation-iteration-count：规定动画应该播放的次数
    6.animation-direction：规定是否应该轮流反向播放动画
    */
  animation: circle_3 1.2s linear infinite;
  /* Firefox */
  -moz-animation: circle_3 1.2s linear infinite;
  /* Safari and Chrome */
  -webkit-animation: circle_3 1.2s linear infinite;
  /* Opera */
  -o-animation: circle_3 1.2s linear infinite;
  /*睡一会再执行*/
  animation-delay: 1.2s;
  /* Safari 和 Chrome */
  -webkit-animation-delay: 1.2s;
  /*放射效果*/
  /* Firefox */
  /* Safari and Chrome */
  /* Opera */
  /* IE9 */
}
@keyframes circle_3 {
  0% {
    transform: scale(0.222);
  }
  50% {
    transform: scale(0.622);
    filter: alpha(opacity=40);
    -moz-opacity: 0.4;
    opacity: 0.4;
  }
  98% {
    transform: scale(1);
    filter: alpha(opacity=20);
    -moz-opacity: 0.2;
    opacity: 0.2;
  }
}
@-moz-keyframes circle_3 {
  0% {
    -moz-transform: scale(0.222);
  }
  50% {
    -moz-transform: scale(0.622);
    transform: scale(0.622);
    filter: alpha(opacity=40);
    -moz-opacity: 0.4;
    opacity: 0.4;
  }
  98% {
    -moz-transform: scale(1);
    transform: scale(1);
    filter: alpha(opacity=20);
    -moz-opacity: 0.2;
    opacity: 0.2;
  }
}
@-webkit-keyframes circle_3 {
  0% {
    -webkit-transform: scale(0.222);
    transform: scale(0.222);
  }
  50% {
    -webkit-transform: scale(0.622);
    transform: scale(0.622);
    filter: alpha(opacity=40);
    -moz-opacity: 0.4;
    opacity: 0.4;
  }
  98% {
    -webkit-transform: scale(1);
    transform: scale(1);
    filter: alpha(opacity=20);
    -moz-opacity: 0.2;
    opacity: 0.2;
  }
}
@-o-keyframes circle_3 {
  0% {
    -o-transform: scale(0.222);
    transform: scale(0.222);
  }
  50% {
    -o-transform: scale(0.622);
    transform: scale(0.622);
    filter: alpha(opacity=40);
    -moz-opacity: 0.4;
    opacity: 0.4;
  }
  98% {
    -o-transform: scale(1);
    transform: scale(1);
    filter: alpha(opacity=20);
    -moz-opacity: 0.2;
    opacity: 0.2;
  }
}
@-o-keyframes circle_3 {
  0% {
    -ms-transform: scale(0.222);
    transform: scale(0.222);
  }
  50% {
    -ms-transform: scale(0.622);
    transform: scale(0.622);
    filter: alpha(opacity=40);
    -moz-opacity: 0.4;
    opacity: 0.4;
  }
  98% {
    -ms-transform: scale(1);
    transform: scale(1);
    filter: alpha(opacity=20);
    -moz-opacity: 0.2;
    opacity: 0.2;
  }
}
